<template>
	<el-row>
		<el-col :span="24">
			<div>
				<div id="all">
					<el-input size="mini" v-model="input" placeholder="请输入用户ID" clearable style="width: 250px;"
						@clear="order()">
					</el-input>
					<el-input size="mini" v-model="input1" placeholder="请输入订单编号" clearable
						style="width: 250px; margin: 0px 3px;"></el-input>
					<div class="block">
						<el-date-picker size="mini" v-model="value1" type="datetimerange" start-placeholder="开始日期"
							end-placeholder="结束日期" :default-time="['12:00:00']">
						</el-date-picker>
					</div>
					<el-select size="mini" v-model="value2" multiple placeholder="请选择订单状态"
						style="width: 200px;margin-left: 3px;">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					</el-input>
					<el-button size="mini" type="primary" icon="el-icon-search" class="search" @click="order()">查找
					</el-button>

					<!-- //导出 -->
					<div class="home">
						<download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" type="xls"
							worksheet="My Worksheet" name="订单信息">
							<el-button size="mini" type="primary" icon="el-icon-download">导出</el-button>
						</download-excel>
					</div>
				</div>

				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="orderSn" label="订单编号">
					</el-table-column>
					<el-table-column prop="userId" label="用户ID">
					</el-table-column>
					<el-table-column prop="name" label="订单状态">
						<el-tag>未付款</el-tag>
					</el-table-column>
					<el-table-column prop="orderPrice" label="订单金额">
					</el-table-column>
					<el-table-column prop="actualPrice" label="支付金额">
					</el-table-column>
					<el-table-column prop="" label="支付时间">
					</el-table-column>
					<el-table-column prop="" label="物流单号">
					</el-table-column>
					<el-table-column prop="" label="物流渠道">
					</el-table-column>
					<el-table-column prop="operation" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情
							</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- //分页 -->
				<div v-if="tableData.length>0">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="ljq.page" :page-sizes="[5, 10, 15, 20]" :page-size="ljq.num"
						layout="total, sizes, prev, pager, next, jumper" :total="ljq.total">
					</el-pagination>
				</div>


				<el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" ref=print>
					<div>
						<span>订单编号</span>
						<span>{{ordere.orderSn}}</span>
					</div>
					<div>
						<span>订单状态</span>
						<el-tag size="mini">未付款</el-tag>
					</div>
					<div>
						<span>订单用户</span>
						<span>{{user.nickname}}</span>
					</div>
					<div>
						<span>用户留言</span>
						<span></span>
					</div>
					<div>
						<span>收货信息</span>
						<span>（收货人）{{ordere.consignee}} （手机号）{{ordere.mobile}} （地址）{{ordere.address}}</span>
					</div>
					<div>
						<span>商品信息</span>
						<el-table :data="orderGoods" border style="width: 100%">
							<el-table-column prop="goodsName" label="商品名称">
							</el-table-column>
							<el-table-column prop="goodsSn" label="商品编号">
							</el-table-column>
							<el-table-column prop="price" label="商品规格">
								<a>标准</a>
							</el-table-column>
							<el-table-column prop="price" label="货品价格">
							</el-table-column>
							<el-table-column prop="number" label="货品数量">
							</el-table-column>
							<el-table-column prop="picUrl" label="图片">
								<template slot-scope="scope">
									<img width="80px" height="80px" :src="scope.row.picUrl" v-if="scope.row.picUrl" />
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div>
						<span>费用信息</span>
						<span>(实际费用){{ordere.orderPrice}}元 = (商品总价){{ordere.goodsPrice}}元 +
							(快递费用){{ordere.freightPrice}}元 - (优惠减免){{ordere.couponPrice}}元 -
							(积分减免){{ordere.grouponPrice}}元</span>
					</div>
					<div>
						<span>支付信息</span>
						<span>（支付渠道）微信支付 （支付时间）</span>
					</div>
					<div>
						<span>快递信息</span>
						<span>（快递公司） （快递单号） （发货时间）</span>
					</div>
					<div>
						<span>退款信息</span>
						<span>（退款金额）元 （退款类型） （退款备注） （退款时间）</span>
					</div>
					<div>
						<span>收货信息</span>
						<span>（确认收货时间）</span>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="print">打 印</el-button>
					</span>
				</el-dialog>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		orderList,
		orderDetail
	} from '../../utils/axios.js'
	export default {
		data() {
			return {
				tableData: [],



				//导出
				json_fields: {
					订单ID: "userId", //常规字段
					订单编号: "orderSn", //支持嵌套属性
					用户ID: "userId", //支持嵌套属性
					订单状态: 0, //支持嵌套属性
					是否删除: 0
				},


				//分页
				ljq: {
					page: 1, //默认前往几页
					num: 20, //默认一页几条
					total: 0 //共几条
				},



				options: [{
						value: '选项1',
						label: '未付款'
					}, {
						value: '选项2',
						label: '用户取消'
					}, {
						value: '选项3',
						label: '系统取消'
					}, {
						value: '选项4',
						label: '已付款'
					}, {
						value: '选项5',
						label: '申请退款'
					},
					{
						value: '选项6',
						label: '已退款'
					},
					{
						value: '选项7',
						label: '已发货'
					},
					{
						value: '选项8',
						label: '用户收货'
					},
					{
						value: '选项9',
						label: '系统收货'
					}
				],

				value1: '',
				value2: '',
				input: '',
				input1: '',

				orderGoods: [],
				user: [],
				ordere: [],


				dialogVisible: false
			};
		},
		created() {
			this.order()
		},
		methods: {
			print() {
				this.$print(this.$refs.print)
				this.dialogVisible = false
			},



			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},


			order() {
				orderList(this.ljq.page, this.ljq.num, this.value1, this.input, this.input1).then(res => {
					console.log(res);
					this.tableData = res.data.data.list
					this.ljq.total = res.data.data.total
				})
			},


			//分页
			handleSizeChange(new_num) {
				// console.log(newnum)
				this.ljq.num = new_num
				this.order()
			},
			handleCurrentChange(new_page) {
				this.ljq.page = new_page
				this.order()
			},


			handleEdit(index, row) {
				console.log(index, row);
				this.dialogVisible = true;
				orderDetail(row).then(res => {
					console.log(res);
					this.ordere = res.data.data.order
					this.user = res.data.data.user
					this.orderGoods = res.data.data.orderGoods
				})
			},
			handleDelete(index, row) {
				console.log(index, row);
			},



		}
	};
</script>

<style lang="less" scoped="scoped">
	.el-dialog div {
		line-height: 60px !important;
	}

	.el-dialog div span:nth-child(1) {
		font-weight: 800;
		margin-right: 10px;
		color: #000000;
	}


	/* //字体居中 */
	/deep/.cell {
		text-align: center;
	}

	/* //头部搜索 */
	#all {
		display: flex;
		width: 70% !important;
		margin-bottom: 10px;
	}

	.search {
		margin-left: 3px !important;
	}

	.input {
		margin-left: 3px !important;
	}

	#all .el-input .el-input__inner {
		background-color: #FFFFFF !important;
		caret-color: #434343 !important;
		color: #999999 !important;
		border: 1px solid #b9b9b9 !important;
	}

	/* //导出 */
	.home {
		height: 100%;
		background-color: rgb(128, 126, 126);
		border-radius: 6px;
		margin-left: 10px;
	}
</style>
